<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  const props = defineProps({
    iconNum:{
      type:Number,
      default:0
    }
  })
  const action = reactive({
     
  })
  onMounted(()=>{

  })
</script>
<template>
  <div class="boxBorder">
    <img v-for="item in iconNum" src="@/assets/images/icon4.png" class="hornIcon">
    <slot></slot>
  </div>
</template>

<style lang='scss' scoped>
  .boxBorder{
    position: relative;
    background: #7e24da;
    border: 1px solid #FFFDE5;
    .hornIcon {
      position: absolute;
      width: 32px;
      height: 32px;
    }
    .hornIcon:nth-child(1) {
      left: 0;
      top: 0;
    }
    .hornIcon:nth-child(2) {
      right: 0;
      top: 0;
      transform: rotate(90deg);
    }
    .hornIcon:nth-child(3) {
      left: 0;
      bottom: 0;
      transform: rotate(-90deg);
    }
    .hornIcon:nth-child(4) {
      right: 0;
      bottom: 0;
      transform: scale(-1);
    }
  }
</style>